<template>
    <el-container style="height: 100%">
      <el-aside width="auto">
        <CommonAside/>
      </el-aside>
      <el-container>
        <el-header>
          <CommonHead/>
        </el-header>
        <el-main>
          <el-card shadow="never">
            <el-row :gutter="20">
              <el-col :span="5">
                 <el-input placeholder="仓库ID" v-model="form.Sid"></el-input>
              </el-col>
              <el-col :span="5">
                <el-input placeholder="货代公司ID" v-model="form.Scbelong"></el-input>
              </el-col>
              <el-col :span="5">
                <el-input placeholder="所属港口" v-model="form.Shbelong"></el-input>
              </el-col>
              <el-button type="success" round @click="insstore">添加</el-button>
              <el-button type="primary" round @click="updatastoredata">修改</el-button>
              <el-button type="info" round @click="findsotredata">查看</el-button>
            </el-row>
          </el-card>
          <el-row :gutter="20" class="el_row">
            <el-col :span="7">
              <el-input placeholder="请输入要删除或查找的仓库ID" v-model="delform.Sid"></el-input>
            </el-col>
            <el-button type="danger" :icon="Delete" @click="delstoredata" circle />
            <el-button type="primary" :icon="Search" @click="findonestore">查找</el-button>
          </el-row>
          <el-table :data="table" stripe style="width: 100%" >
            <el-table-column prop="Sid" label="仓库ID" ></el-table-column>
            <el-table-column prop="Stonnum" label="剩余吨数"  />
            <el-table-column prop="Scasenum" label="剩余件数"  />
            <el-table-column prop="Shbelong" label="所属港口" />
            <el-table-column prop="Scbelong" label="货代公司ID" />
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </template>

  <script>
  import  CommonAside from '@/componesnt/CommonAside'
  import  CommonHead from '@/componesnt/CommonHead'
  import {onMounted, ref} from "vue";
  import {options} from './options'
  import {insstoredata} from '@/api/storeIns'
  import {Findallstoredata} from "@/api/storeFindall"
  import {Delete,Search} from "@element-plus/icons-vue"
  import {Delstore} from '@/api/storeDel'
  import {findonestoredata} from '@/api/storeFindone'
  import {updatastore} from '@/api/storeUpdata'
  import {ElMessage} from "element-plus";
  export default {
    name: "storage",
    components:{
      CommonAside,
      CommonHead
  },
    setup(){
    const form = ref({
      Sid:'',
      Stonnum:0,
      Scasenum:0,
      Shbelong:'',
      Scbelong:'',
    })
    const delform = ref({
      Sid:'',
    })
      onMounted(()=>{
        findsotredata()
      })
    const find = ref([])
    const table = ref([])
      const insstore = () => {
        insstoredata(form.value).then(res => {
          if (res.data.success === true) {
            ElMessage.success('添加成功')
            findsotredata()
          } else {
            ElMessage.error(res.data)
          }
        })
      }
      const updatastoredata = () => {
        updatastore(form.value).then(res => {
          if (res.data.success === true) {
            ElMessage.success('修改成功')
            findsotredata()
          } else {
            ElMessage.error('修改失败,请检查信息')
          }
        })
      }

    const findsotredata = async () =>{
      const res = await Findallstoredata()
      console.log(res.data.message)
      table.value = res.data.message
    }

      const findonestore = async () => {
        if (delform.value.storeId===''){
          findsotredata()
        }else {
          const res = await findonestoredata(delform.value)
          table.value = res.data.message
        }

      }

      const delstoredata = () => {
        Delstore(delform.value).then(res => {
          if (res.data.success === true) {
            ElMessage.success('删除成功')
            findsotredata()
          } else {
            ElMessage.error('删除失败,公司是否存在')
          }
        })
      }



      return {form,options,insstore,table,findsotredata,delform,Delete,delstoredata,Search,findonestore,find,updatastoredata}
    }
  }
  </script>

  <style lang="less" scoped>
  .el-header{
    background-color: black;
  }
  .el_main{
    padding-top: 0;
  }

  .el_row{
    padding-top: 10px;
    padding-left: 7px;
  }
  </style>